﻿<template>
  <div class="theme-toggle">
    <!-- 简单切换按钮 -->
    <el-button v-if="mode === 'button'" :type="isDark ? 'warning' : 'primary'" :icon="themeConfig.icon" :loading="isTransitioning" @click="toggleTheme" :title="`切换到${nextThemeConfig.name}`">
      <span v-if="showText">{{ themeConfig.name }}</span>
    </el-button>

    <!-- 开关样式 -->
    <div v-else-if="mode === 'switch'" class="theme-switch" @click="toggleTheme">
      <div class="switch-track" :class="{ active: isDark }">
        <div class="switch-thumb">
          <el-icon>
            <Sunny v-if="!isDark" />
            <Moon v-else />
          </el-icon>
        </div>
      </div>
      <span v-if="showText" class="switch-label">{{ themeConfig.name }}</span>
    </div>

    <!-- 下拉选择 -->
    <el-dropdown v-else-if="mode === 'dropdown'" @command="setTheme" trigger="click">
      <el-button :icon="themeConfig.icon" :loading="isTransitioning">
        <span v-if="showText">{{ themeConfig.name }}</span>
        <el-icon class="el-icon--right"><arrow-down /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="theme in availableThemes" :key="theme.key" :command="theme.key" :class="{ active: currentTheme === theme.key }">
            <el-icon><component :is="theme.icon" /></el-icon>
            <span>{{ theme.name }}</span>
            <el-icon v-if="currentTheme === theme.key" class="check-icon">
              <Check />
            </el-icon>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <!-- 图标按钮 -->
    <div
      v-else
      class="theme-icon-button"
      :class="{
        'is-dark': isDark,
        'is-loading': isTransitioning
      }"
      @click="toggleTheme"
      :title="`切换到${nextThemeConfig.name}`"
    >
      <el-icon v-if="!isTransitioning">
        <Sunny v-if="!isDark" />
        <Moon v-else />
      </el-icon>
      <el-icon v-else class="loading-icon">
        <Loading />
      </el-icon>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue"
import { ArrowDown, Check, Loading, Moon, Sunny } from "@element-plus/icons-vue"
import { useTheme } from "@/composables/ui/useTheme"

// 组件属性
const props = defineProps({
  // 显示模式：button | switch | dropdown | icon
  mode: {
    type: String,
    default: "icon",
    validator: value => ["button", "switch", "dropdown", "icon"].includes(value)
  },
  // 是否显示文字
  showText: {
    type: Boolean,
    default: false
  },
  // 自定义大小
  size: {
    type: String,
    default: "default",
    validator: value => ["large", "default", "small"].includes(value)
  }
})

// 使用主题功能
const { currentTheme, isTransitioning, isDark, themeConfig, nextThemeConfig, toggleTheme, setTheme, getAvailableThemes } = useTheme()

// 可用主题列表
const availableThemes = computed(() => getAvailableThemes())
</script>

<style scoped lang="scss">
@use "@/styles/base/variables" as *;
@use "@/styles/base/mixins" as *;

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);

  .theme-switch {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    user-select: none;

    .switch-track {
      position: relative;
      width: 48px;
      height: 24px;
      background: var(--color-bg-quaternary);
      border-radius: var(--border-radius-full);
      transition: all var(--transition-base);
      border: 1px solid var(--color-border-secondary);

      &.active {
        background: var(--color-primary);
        border-color: var(--color-primary);

        .switch-thumb {
          transform: translateX(24px);
          background: var(--color-text-inverse);
          color: var(--color-primary);
        }
      }

      .switch-thumb {
        position: absolute;
        top: 1px;
        left: 1px;
        width: 20px;
        height: 20px;
        background: var(--color-bg-primary);
        border-radius: var(--border-radius-full);
        transition: all var(--transition-base);
        @include flex-center;
        font-size: 12px;
        color: var(--color-text-secondary);
        box-shadow: var(--shadow-sm);
      }
    }

    .switch-label {
      font-size: var(--font-size-sm);
      color: var(--color-text-secondary);
      font-weight: var(--font-weight-medium);
    }

    &:hover {
      .switch-track {
        box-shadow: var(--shadow-sm);

        &:not(.active) {
          background: var(--color-bg-hover);
        }
      }
    }
  }

  // 下拉菜单样式
  :deep(.el-dropdown-menu__item) {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);

    &.active {
      background: var(--color-bg-active);
      color: var(--color-primary);
    }

    .check-icon {
      margin-left: auto;
      color: var(--color-success);
    }
  }

  // 自定义图标按钮 - 优化样式
  .theme-icon-button {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-lg);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    color: var(--color-text-secondary);
    font-size: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);

    // 光效动画
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transition: left 0.6s ease;
    }

    &:hover {
      background: var(--color-bg-quaternary);
      border-color: var(--color-primary);
      color: var(--color-primary);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);

      &::before {
        left: 100%;
      }

      .el-icon {
        transform: scale(1.15) rotate(15deg);
      }
    }

    &:active {
      transform: translateY(-1px);
      box-shadow: var(--shadow-sm);
    }

    // 暗色主题状态 - 使用灰色调
    &.is-dark {
      background: var(--color-bg-secondary);
      color: var(--color-text-primary);
      border-color: var(--color-border-primary);
      box-shadow: var(--shadow-sm);

      &:hover {
        background: var(--color-bg-quaternary);
        border-color: var(--color-primary);
        color: var(--color-primary);
        box-shadow: var(--shadow-md);

        .el-icon {
          transform: scale(1.15) rotate(-15deg);
        }
      }
    }

    // 加载状态
    &.is-loading {
      pointer-events: none;
      opacity: 0.8;

      .loading-icon {
        animation: spin 1s linear infinite;
      }
    }

    .el-icon {
      transition: all var(--transition-base);
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    }
  }

  // 按钮动画
  .el-button {
    transition: all var(--transition-fast);

    &:hover:not(:disabled) {
      transform: translateY(-1px);
    }

    &:active {
      transform: translateY(0);
    }
  }
}

// 主题切换动画
:global(.theme-transitioning) {
  * {
    transition:
      background-color 0.3s ease,
      color 0.3s ease,
      border-color 0.3s ease,
      box-shadow 0.3s ease !important;
  }
}

// 动画关键帧
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 响应式设计
@include respond-below(md) {
  .theme-toggle {
    .switch-label {
      display: none;
    }
  }
}
</style>
